<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui" template="/layout/principal.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all"><h:outputText value="Lista de Breaks" /></h1>

        <h:form>
            <p:growl id="growl" showDetail="true" life="3000" />

            <p:dataTable id="dttBreak" var="b" value="#{breakk.listBreak}" paginator="true" rows="10"
                onRowEditUpdate="growl" rowEditListener="#{breakk.modificarBreak}">

                <p:column headerText="Nombre" style="width:200px">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{b.nombre}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputTextarea value="#{b.nombre}" style="width:150px;height:30px;" effectDuration="400" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Descripción" style="width:200px">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{b.descripcion}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputTextarea value="#{b.descripcion}" style="width:150px;height:30px;"
                                effectDuration="400" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Estado" style="width:150px">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{b.estado}" />
                        </f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{b.estado}">
                                <f:selectItem itemLabel="Activo" itemValue="A" />
                                <f:selectItem itemLabel="Inactivo" itemValue="I" />
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>
                </p:column>

                <p:column headerText="Options">
                    <p:rowEditor />
                </p:column>

                <f:facet name="footer">
                    <p:commandButton value="Nuevo Break" image="ui-icon ui-icon-search" update="display"
                        oncomplete="dialog.show()" style="width: 200px;">
                        <f:setPropertyActionListener value="#{b}" target="#{breakk.selectedBreak}" />
                    </p:commandButton>
                </f:facet>
            </p:dataTable>

            <p:dialog header="Nuevo Break" widgetVar="dialog" showEffect="fade" hideEffect="explode" resizable="false">
                <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
                    <h:outputLabel value="Nombre : *" for="nombreId" />
                    <p:inputText id="nombreId" value="#{breakk.selectedBreak.nombre}" required="true" />

                    <h:outputLabel value="Descripción : *" for="descripcionId" />
                    <p:inputText id="descripcionId" value="#{breakk.selectedBreak.descripcion}" required="true" />

                    <p:commandButton value="Crear" image="ui-icon ui-icon-comment" action="#{breakk.crear}"
                        update="dttBreak" ajax="false" />
                </h:panelGrid>
            </p:dialog>

        </h:form>
    </ui:define>
</ui:composition>